<script setup>
import { ref, reactive } from 'vue'
import Header from '../components/Header.vue'
const active = ref(0);


const data = reactive({
    tabbar: [
        {
            id: 0,
            path: '/movie',
            text: '电影/影院',
            active: '/src/assets/images/movie_active.png',
            inactive: '/src/assets/images/movie.png'
        },
        {
            id: 1,
            path: '/video',
            text: '视频',
            active: '/src/assets/images/video_active.png',
            inactive: '/src/assets/images/video.png'
        },
        {
            id: 2,
            path: '/smallvideo',
            text: '小视频',
            active: '/src/assets/images/shortvideo_active.png',
            inactive: '/src/assets/images/shortvideo.png'
        },
        {
            id: 3,
            path: '/user',
            text: '我的',
            active: '/src/assets/images/myCenter_active.png',
            inactive: '/src/assets/images/myCenter.png'
        }
    ]
})

</script>
<template>
    <div>
        <Header></Header>
        <router-view></router-view>
    </div>

    <van-tabbar v-model="active" active-color="#f03d37" route>
        <van-tabbar-item v-for="item in data.tabbar" :key="item.id" :to="item.path">
            <span>{{ item.text }}</span>
            <template #icon="props">
                <img :src="props.active ? item.active : item.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>

</template>

<style scoped lang="sass">
</style>